<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新增门票产品</title>
    <script src="__PUBLIC__/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
    <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
</head>
<style>
    /*.page1{*/
    /*display: none;*/
    /*}*/
    .layui-input-block{
        /*margin-left: 40px;*/
    }
    .searchs{
        position: absolute;
        right: 200px;
    }
    .travel_list{
        height:200px;
        margin-left: 30px;
        margin-right: 30px;
        overflow-y: scroll;
    }

    .travel_tit{
        margin-left: 30px;
        margin-right: 30px;
    }
    .layui-table thead tr{
        background: #e6e6e6;
    }
    .page4-box{
        padding: 12px 16px;
    }
    .query-box{
        padding:20px 20px 10px 20px ;
        /*padding-top:20px;*/
        border: 1px solid #e6e6e6;
        min-height: 45px;
    }
    .selected_trip{
        border: 1px solid #e6e6e6;
    }
    .tripspan{
        margin-left: 40px;
        margin-right: 30px;
    }
    .tripspan span{
        line-height: 38px;
        background: #00a0e9;
        padding: 5px;
        border-radius: 10px;
        color: #fff;
    }
    .tag{
        float: left;
    }
    /*上一步下一步按钮居中*/
    .butcent{
        position: absolute;
        bottom: 20px;
        left: 40%;
        margin-left: 30%;
        width:20%;
        /*margin: 30px;*/
        padding: 30px;
    }

    .butcent2{
        margin-left: 70%;
        width:20%;
        padding: 30px;
    }

    .picturebut{
        /*background-color: #fbfdff;*/
        border: 1px solid #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        font-size:22px;
        width:48%;
        height: 100%;
        margin-top:-10%;
        margin-left:-8%;
        cursor: pointer;
        line-height: 300px;
        vertical-align: top;
    }
    .page3{
        margin-left: 16%;
        margin-top: 20%;
    }
    .layui-form-select .layui-edge{
        display: none;
        right: 0;
    }
    th{
        text-align: left;
    }
    .layui-input{
        border-radius: 5px;
    }

</style>
<body>

<div>
    <form class="layui-form " id="customer" action="">
        <div class="page1">
            <div class="layui-form-item" style="margin-top: 20px;">
                <div class="layui-inline">
                    <label class="layui-form-label"><span style="color: red">* </span>门票名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input" style="width:500px;">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">关联POI</label>
                <div class="layui-input-inline selectpoilist" style="width:500px;">
                    <select name="poiid" lay-filter="poiid" lay-search id="poi_select">
                        <option value="">输入POI名称</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">供应商</label>
                <div class="layui-input-inline" style="width:500px;">
                    <select name="supplier_id" lay-filter="supplier_id" lay-search>
                        <option value="77777">无</option>
                        <option value="999999">自营</option>
                        {volist name="supplier" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                        {/volist}
                        <option value="1000000">其他</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">产品编号（供应商）</label>
                    <div class="layui-input-block">
                        <input name="supplier_item_code" value placeholder="请输入" autocomplete="off" class="layui-input" type="text">
                    </div>
                </div>
            </div>
        </div>
    </form>

    <div class="layui-form-item">
        <div class="container">
            <div class="page1 butcent">
                <button class="layui-btn" lay-submit lay-filter="customer">新建</button>
            </div>
        </div>
    </div>
</div>
</body>

<script src="__PUBLIC__/layui/layui.js"></script>
<script src="__PUBLIC__/jquery/jquery.min.js"></script>
<script>
    layui.use(['layer','form','jquery'],function(){
        var layer = layui.layer,
            $ = layui.jquery,
            form = layui.form;

        form.on('submit(customer)', function() {
            var name=$('#name').val();
            if(name !==''){
                $.ajax({
                    url:"{:url('/admin/ticket/info')}",
                    data:$('#customer').serialize(),
                    type:'post',
                    async: false,
                    success:function(res) {
                        var id = res.data;
                        parent.$("#tripid").attr("value",id);
                        layer.msg(res.msg);
                        if(res.code == 1) {
                            setTimeout(function(){
                                var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                                parent.layer.close(index); //再执行关闭
                            },1500)
                        }
                    }
                })
            }else{
                layer.msg('请补全门票信息')
            }
        });

        function selectPoi2(e){
            if (e.keyCode == 13) {
                var input = $(this).val();
                //其他
                if(input!==null && input!==''){
                    var poiSelect = $(this).parent().parent().parent().find("#poi_select");
                    $.ajax({
                        url:"{:url('getpoiByInput')}",
                        type:'post',
                        data:{input:input},
                        success:function(data) {
                            //无数据提示新增poi
                            if(data.length<1 && input!="" && input!=undefined){
                                return false;
                            }
                            var html="<option value=''>请选择POI</option>";
                            for(var i=0;i<data.length;i++){
                                html += "<option value="+data[i]["id"]+">"+data[i]["name"]+"</option>";
                            }

                            poiSelect.html(html);

                            //重新渲染select
                            form.render('select');

                            poiSelect.next().addClass("layui-form-selected");
                            poiSelect.next().find("input").focus();
                            poiSelect.next().find("input").val(input);
                            poiInvertSelect();
                        }
                    });
                }

                return false;
            }
        }
        function poiInvertSelect(){
            $(".selectpoilist input").on('keyup',selectPoi2);
        }
        //延迟绑定keyup事件
        window.onload = poiInvertSelect;
    });
</script>
</html>